<template>
    <el-button-group>
        <el-button type="warning" size="small" @click="bindRefresh">刷新</el-button>
        <el-button type="warning" size="small" @click="bindAccountAdd">添加</el-button>
    </el-button-group>

    <!-- 用户列表 -->
    <el-table :data="acountList" border stripe>
        <el-table-column prop="m_id" label="序号"> </el-table-column>
        <el-table-column label="头像" width="100">
            <template #default="scope">
                <el-image :src="onFilterUrl(scope.row.headerimg)"></el-image>
            </template>
        </el-table-column>
        <el-table-column prop="username" label="名称"> </el-table-column>
        <el-table-column prop="nick" label="昵称"> </el-table-column>
        <el-table-column label="角色">
            <template #default="scope">
                <!-- <span v-html="getRoleName(scope.row.role_id)"></span> -->
                {{ getRoleName(scope.row.role_id) }}
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="">编辑</el-button>
                    <el-popconfirm
						title="确认删除吗？"
						confirm-button-text="确认"
						cancel-button-text="取消"
						@confirm="bindAccountDelete(scope.row.m_id)"
					>
						<template #reference>
							<el-button size="small" type="danger">删除</el-button>
						</template>
					</el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加账户 1. 弹出添加账户对话框， 2. 对话框内容为自定义表单组件 3. 图片预览，表单文件提交 4. 组件通讯 -->
    <el-dialog title="添加账户" v-model="disableAccountAdd" width="40%">
        <!-- v-mode组件双向通讯 props: modelValue  事件 update:modelValue
             v-model:age  props: age   update:age 

             示例:v-model="disableAccountAdd"
                  执行emit('update:modelValue',false)  =>将false值赋值给 disableAccountAdd=false
        -->
        <!-- <AccountAddDialog @close="closeDialog"></AccountAddDialog> -->
        <AccountAddDialog v-model="disableAccountAdd"></AccountAddDialog>
    </el-dialog>
</template>

<script setup lang="ts">
import AccountAddDialog from '@/components/AccountAddDialog.vue'
import { useAccount } from '@/hooks/user'
import {watch} from 'vue'
const { acountList,disableAccountAdd, onFilterUrl, getRoleName,bindAccountAdd,bindAccountDelete,bindRefresh ,closeDialog} = useAccount()
watch(disableAccountAdd,()=>{ bindRefresh()})

</script>

<style scoped></style>
